<template>
  <div>
    <div class="t_body_bg" :style="{backgroundImage: 'url('+bgimg+')'}">
      <div style="width: 6.3rem; margin: 0 auto;">

        <div class="t_logo_font flexcc" >
          <span v-if="!logoimg" style="font-size: 0.3rem; font-weight: bold;">logo</span>
          <img :src="logoimg" style="width: 2.5rem;">
        </div>
        <div style="text-align: center; font-size: 0.3rem; font-weight: bold; margin: 0.5rem 0;">{{ comname }}</div>
        <div style="text-align: center; font-size: 0.3rem; font-weight: bold; margin: 0.5rem 0;">绑定手机号</div>

        <div style="margin-top: 1rem;">
          <div class="t_input_box">
            <img src="../../../static/img/user.png" alt="">
          	<el-input class="t_del_com_input" v-model="form.phonenum" placeholder="请输入手机号"></el-input>
          </div>
          <div class="t_input_box" style="position: relative;">
            <img src="../../../static/img/psd.png" alt="">
          	<el-input class="t_del_com_input" v-model="form.code" maxlength="6"  placeholder="请输入验证码"></el-input>
          	<div @click="getcode" class="t_get_code" style="position: absolute; right: 2px; top: 2px;">{{ codemsg }}</div>
          </div>
          <div class="t_input_box" style="position: relative;" v-if="distributor != 0">
            <img src="../../../static/img/psd.png" alt="">
          	<el-input class="t_del_com_input" v-model="form.yqcode"  placeholder="请输入邀请码"></el-input>
          </div>
          <div @click="denglu3" class="t_login_btn_box">
          	确定
          </div>
        </div>
        <div class="flexcc" style="margin-top: 1rem; color: rgb(0, 90, 255); font-size: 0.3rem;" @click="go('/mlogin/login')">
          返回登录
        </div>

      </div>
    </div>
  </div>
</template>

<script>

	export default {
		name: 'login',
    components:{

    },
		data() {
			return {
				codemsg:'获取验证码',
				form:{
					phonenum:'',//手机号
					code:'',//验证码
          yqcode:""
				},
				bgimg:require('@/../static/mimg/mbj.jpg'),
				logoimg:'',
				comname:'欢迎使用',

        weixinhuanjing:false,
        appid:"",
        weixinall:"",
        check_code:"",

        distributor:0

			}
		},
		created() {
      // var ua = window.navigator.userAgent.toLowerCase();
      // if (ua.match(/micromessenger/i) == 'micromessenger') {
      //      this.weixinhuanjing = true
      // }

    //   this.check_code = localStorage.getItem('check_code')

		  axios.get('/api/logo').then((response)=>{
        if (response.data.msg.code == 0) {
        //   this.bgimg = response.data.data.h5_login_background
			if(response.data.data.h5_login_background&&response.data.data.h5_login_background!==''){
				this.bgimg = response.data.data.h5_login_background
			}else{
				this.bgimg = require('@/../static/mimg/mbj.jpg')
			}
          this.comname = response.data.data.shop_name
          this.logoimg = response.data.data.system_logo
          document.title = response.data.data.shop_name


          // axios.get('/api/inv/parsing?check_code='+encodeURIComponent(this.check_code)).then((response)=>{
          //   if (response.data.msg.code == 0) {
          //     this.distributor = response.data.data.distributor
          //   } else {
          //     this.$message.error(response.data.msg.info);
          //   }
          // })
        } else {
          this.$message.error(response.data.msg.info);
        }
		  })
		},
		mounted() {
      var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;

      axios.get('/api/wechat/get').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.appid  =  response.data.data
            var ua = window.navigator.userAgent.toLowerCase();
            if (ua.match(/micromessenger/i) == 'micromessenger') {
                 this.weixinhuanjing = true
            }
            if(this.appid && this.weixinhuanjing){
              if(this.$route.query.code){
                axios.get('/api/wechat/code2token?code='+this.$route.query.code).then((response)=>{
                  if (response.data.msg.code == 0) {
                    console.log(this.weixinall)
                    this.weixinall = response.data.data

                   if(response.data.data.wechat_register == 1){
                     axios.post('/api/wechat/login',{open_id:this.weixinall.openid}).then((response)=>{
                     	if (response.data.msg.code == 0) {
                        console.log('已绑定账号！登录成功！')
                        // if(response.data.data.is_owner == 1){
                        //   location.href = location.origin + '/hou/shangpinguanli/zaishoushangpin'
                        // }else{
                        //   location.href = location.origin + '/web'
                        // }
                        location.href = location.origin + '/web'
                     	}else {
                         vant.Toast(response.data.msg.info);
                     	}
                     })
                   }else{
                     console.log('未绑定账号！等待绑定！')
                     //未绑定账号 this.weixinall.openid
                   }

                  }else {
                    //code不对
                    this.weixindenglu()
                  }
                })
              }else{
                this.weixindenglu()
              }
            }
        	}else {
            vant.Toast(response.data.msg.info);
        	}
        })


		},
		methods: {

      weixindenglu:function(){

        let url = location.origin + '/web/mlogin/bangdingshoujihaologin'

        window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+this.appid+'&redirect_uri='+url+'&response_type=code&scope=snsapi_base&state=123#wechat_redirect'
        // window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+this.appid+'&redirect_uri='+url+'&response_type=code&scope=snsapi_base&state=123#wechat_redirect'
      },
      // weixindenglu:function(){

      //   let u = ''
      //   if(this.$route.query.shop_id){
      //     u = '?/shop_id='+this.$route.query.shop_id
      //   }
      //   if(this.$route.query.shops_id){
      //     u = '?/shops_id='+this.$route.query.shops_id
      //   }
      //   let url = location.origin + location.pathname + u

      //   // wxe9a853825d8c4b19
      //   window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+this.appid+'&redirect_uri='+url+'&response_type=code&scope=snsapi_base&state=123#wechat_redirect'
      // },


      denglu3:function(){

        let obj = {
          open_id:this.weixinall.openid,
          mobile:this.form.phonenum,
          code:this.form.code,
          app_id:this.appid,
        }
        axios.post(`/api/wechat/login2`, obj).then((response)=>{
        	if (response.data.msg.code == 0) {
            console.log('绑定手机号并登录成功')
            location.href = location.origin + '/web'
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },


			//获取验证码
			getcode(){
				if(this.form.phonenum.length!=11){
          vant.Toast('请输入正确手机号');
					return
				}

				if(this.codemsg=='获取验证码'){
					this.codemsg = 60
					var time = setInterval(()=>{
						if(this.codemsg>0){
							this.codemsg--
						}else{
							this.codemsg = '获取验证码'
							clearInterval(time)
						}
					},1000)

          var obg = {
          	mobile:this.form.phonenum,
          }


          axios.post('/api/user/login/code/send',obg).then((response)=>{
          	if (response.data.msg.code == 0) {
              vant.Toast('发送成功');
          	} else {
          		vant.Toast(response.data.msg.info);
          	}
          })

				}
			}
		}
	}
</script>

<style scoped>
	.t_body_bg{
		width:100vw;
		height:100vh;
		/* background-image: url('/static/img/loginbg.png'); */
		/* background-position: center center; */
    background-size: cover;
    background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: flex-end;

	}
	.t_login_box{
		width: 524px;
		/* height: 776px; */
		padding: 30px;
		border-radius: 45px;
		background-color: #f6f8fb;
		text-align: center;
		margin-right: 200px;
	}
	.t_login_con{
		width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
	.t_type_box{
		display: flex;
		justify-content: center;
		margin-bottom: 30px;
	}
	.t_type_btn{
		width: 100px;
		height: 50px;
		background-color: #e3e8f1;
		border-radius: 25px;
		text-align: center;
		line-height:50px ;
		color: #AFB3BC;
		border: 1px solid #E3E8F1;
		cursor: pointer;
	}
	.t_type_btn_lei{
		background-color: #E6EFFF;
		color: #005AFF;
		border: 1px solid #005AFF;
	}
	.t_input_box{
		border: 1px solid #e3e8f1;
		border-radius: 25px;
		display: flex;
		height: 46px;
		align-items: center;
		background-color: white;
		overflow: hidden;
		margin-bottom: 20px;
	}
	.t_input_box img{
		margin-left: 22px;
		margin-right: 0px;
	}
	/deep/.t_input_box .el-input__inner{
		border: none;
	}
	.t_get_code{
		width: 112px;
		height: 40px;
		background: #e6efff;
		border: 1px solid #005aff;
		border-radius: 25px;
		text-align: center;
		line-height: 40px;
		color: #005AFF;
		font-size: 14px;
		cursor: pointer;

	}
	.t_login_btn_box{
		background-color:#005aff;
		color: white;
		text-align: center;
		height: 50px;
		line-height: 50px;
		font-size: 18px;
		border-radius: 25px;
		margin-top: 60px;
		cursor: pointer;
	}
	.t_tips_btn{
		color: #afb3bc;
		font-size: 14px;
		text-align: center;
		margin-top: 23px;
		cursor: pointer;
	}
	.t_logo_font{
		margin-top: 58px;
		color: #005aff;
		font-size: 29px;
	}
	.t_logo_font img{
		width: 100px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.t_welcome_font{
		margin-top: 28px;
		margin-bottom: 28px;
		font-weight: bold;
		font-size: 28px;
	}
	/deep/.t_del_com_input .el-input__inner{
		border: none !important;
		background-color: white !important;
	}
</style>
